<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./sass/personal.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2708812_d1142so2yne.css">
    <script src="https://at.alicdn.com/t/font_2708812_u956usm2raf.js"></script>
</head>

<body>
    <div class="g_nav">
        <div class="nav_l">
            <a href="">
                <img src="./images/logo-mi2.png" alt="">
                个人中心
            </a>
        </div>
        <div class="nav_r">
            <a href="">欢迎用户:<span class="user_n"></span></a>
            <a href="">隐私政策</a>
            <a href="">帮助中心</a>
        </div>
    </div>

    <div class="g_con">
        <div class="con_l">
            <div class="head">
                <div class="tx"></div>
                <span>weichange</span>
                <p>+86&emsp;<span class="ge_tel1">153245825</span></p>
            </div>
            <div class="security">
                <ul>
                    <li class="active">个人信息</li>
                    <li>登录与安全</li>

                </ul>
            </div>
        </div>
        <div class="con_r">
            <div class="xianxi">
                <p class="tit_fs">个人信息</p>
                <ul>
                    <li>
                        <span><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yonghu"></use>
                            </svg>&ensp;用户名</span>
                        <p>
                            <span class="ge_name"></span>&emsp;
                            <span class="xiug_user xiug">
                            </span>
                        </p>
                    </li>
                    <li>
                        <span><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shouji"></use>
                            </svg>&ensp;手机号</span>
                        <p><span class="ge_tel"></span>
                            &emsp;
                            <!-- <span class="xiug_tel xiug">修改
                                <i class="iconfont icon-iconfontangleright"></i>
                            </span> -->
                        </p>
                    </li>

                    <li>
                        <span><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youxiang"></use>
                            </svg>&ensp;邮箱</span>
                        <p><span class="ge_email"></span>&emsp;
                            <!-- <span class="xiug_email xiug">修改
                                <i class="iconfont icon-iconfontangleright"></i>
                            </span> -->
                        </p>
                    </li>
                </ul>
                <p class="tit_fs">账号安全</p>
                <ul>

                    <li>
                        <span><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-mima"></use>
                            </svg>&ensp;修改密码</span>
                        <p>&emsp;
                            <span class="xiug_pwd xiug">修改
                                <i class="iconfont icon-iconfontangleright"></i>
                            </span>
                        </p>
                    </li>
                </ul>

                <button class="tui_login"> 退出登录</button>

            </div>
        </div>
    </div>

    <div class="update">
        <p>原密码 :&emsp;<input type="text" class="old"></p>
        <p>新密码 :&emsp;<input type="text" class="confirm"></p>
        <p class="tishi"></p>
        <button class="yes">确定</button>
        <button class="no">取消</button>

    </div>
</body>
<script src="./js/api.js"></script>
<script src="./js/tool_ajax.js"></script>
<script>
    const user = localStorage.getItem('login_user');
    console.log(user);
    if (user) {
        $('.ge_name').innerHTML = user;
        $('.user_n').innerHTML = user;
    }
    //退出登录
    $('.tui_login').onclick = () => {
        alert('已退出登录')
        localStorage.removeItem('login_user')
    }

    $('.xiug_pwd').onclick = () => {


        $('.update').style.display = 'block'

        $('.yes').onclick = async function () {


            var oldpwd = $('.old').value
            var confirmpwd = $('.confirm').value


            if (oldpwd && confirmpwd) {
                var reg = /^[\w$]{6,16}$/;
                if (reg.test(confirmpwd)) {
                    const res = await change_({
                        username: user,
                        oldpwd,
                        confirmpwd

                    })
                    console.log(res);
                    const {
                        status,
                        msg
                    } = res;
                    if (status) {
                        alert("密码修改成功请重新登录!")
                        $('.yes').style.display = "none";
                        localStorage.removeItem('login_user')
                        location.href = './login.html';
                    } else {
                        alert(msg)
                    }
                } else {
                    $('.tishi').innerHTML = "* 密码长度应在6-20个字符之间,区分大小写"
                    $('.tishi').style.color = "red"
                }
            }
        }

        $('.no').onclick = function () {
            $('.update').style.display = "none";
        }
    }


    getDate()
    async function getDate() {

        const res = await personal({
            username: user
        })
        console.log(res);
        const {
            status,
            msg,
            data
        } = res
        console.log(res);

        $('.ge_tel').innerHTML = data.tel;
        $('.ge_tel1').innerHTML = data.tel;
        $('.ge_email').innerHTML = data.email;

    }
</script>

</html>